<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 苹果是否显示状态栏 yes为全屏运行-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 作用是控制状态栏显示样式-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 样式检测telephone、email、address-->
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Expires" CONTENT="-1">
    <meta http-equiv="Cache-Control" CONTENT="no-cache">
    <meta http-equiv="Pragma" CONTENT="no-cache">
    <title>推荐有礼</title>
    <script src="js/qrcode.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 背景层灰色 -->
    <div id="blackground"></div>
    <div id="faceToface">
        <img src="./images/hand.png" alt="面对面推荐">
        <div id="qrcode"></div>
    </div>  
<!-- 邀请好友和面对面邀请 -->
    <div class="btns">
        <div class="invitation">
            <p class="btn-invitation" onclick="share.shareToWeb('京客隆APP|新人红包等你领','把京客隆超市装进手机')">邀请好友</p>
        </div>
        <div class="faceToface">
            <p class="btn-faceToface">面对面邀请</p>
        </div>
    </div> 
<!-- 活动规则和已注册用户 -->
    <div class="ruleAnduser">
        <ul>
            <li>活动规则</li>
            <li>已注册用户</li>
        </ul>
        <div class="rule">
            <p>
               1、新用户通过推荐有礼活动页面注册后即可获得新人优惠券（使用规则详见优惠券说明）。</br>
               2、邀请新人在新用户实现首单购物后可获得一张（使用规则详见优惠券说明），每个邀请人最多可获得10张优惠券。</br>
               3、获得优惠券请在【我的】-【我的优惠券】中查看。</br>
               4、优惠券需在有效期内使用，有效期为获券之日起7日内有效。</br>
               5、优惠券仅限京客隆APP中购物使用（秒杀商品除外）。</br>
               6、本活动仅限新用户参加，统一ID、手机号、移动设备、支付账号不能重复参与活动，若发现用户活动作弊行为等，京客隆有权取消其活动资格。 
            </p>
        </div>
        <div class="user" style="display: none">
            <div class="activity" id="J_Activity">
              <ul id="list" style="top: -24.3133px;">
              </ul>
            </div>
        </div>
    </div>
     <script src="js/jquery-1.8.3.min.js"></script>
     <script src="js/qrcode.min.js"></script>
      <script>
          function showMessage(_str){

            if(_str=='[]'){
                return;
            } else {
                var obj = eval(_str);
                var newContent = '';
                for(var i=0; i < obj.length; i++){
                      newContent+='<li class=_"no">';
                       //newContent+=obj[i].mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
                      
                      // console.log(typeof(obj[i].mobile));
                       

                        obj[i].mobile=obj[i].mobile.split("");
                        // console.log(obj[i].mobile);
                       
                        obj[i].mobile.splice(3,4,'*','*','*','*');
                        // console.log(obj[i].mobile);
                     
                        obj[i].mobile=obj[i].mobile.join('');
                        // console.log(obj[i].mobile);
        
                        newContent+=obj[i].mobile;

                        newContent+='</li>';
                }
                document.getElementById("list").innerHTML=newContent;
            }
         }
        // var str = '[{"mobile": "-----------"},{"mobile": "-----------"},{"mobile": "-----------"},{"mobile": "-----------"},{"mobile": "-----------"},{"mobile": "-----------"}]'; 
        // showMessage(str);
     </script>
     <script>
  $(function(){

    $('.ruleAnduser>ul>li:nth-child(1)').on('click', function() {
        $('.ruleAnduser>ul>li:nth-child(1)').css("color","#f13435");
        $('.ruleAnduser>ul>li:nth-child(2)').css("color","#f13435");
        $('.rule').css("display", "block").addClass("myMoveleft");
        $('.user').css("display", "none");
        $('.ruleAnduser>ul>li:nth-child(1)').css("border-bottom", "2px solid #f13435");
        $('.ruleAnduser>ul>li:nth-child(2)').css("border-bottom", "none");
    });

    $('.ruleAnduser>ul>li:nth-child(2)').on('click', function() {
        $('.ruleAnduser>ul>li:nth-child(1)').css("color","#888888");
        $('.ruleAnduser>ul>li:nth-child(2)').css("color","#f13435");
        $('.rule').css("display", "none");
        $('.user').css("display", "block").addClass("myMoveright");
        $('.ruleAnduser>ul>li:nth-child(1)').css("border-bottom", "none");
        $('.ruleAnduser>ul>li:nth-child(2)').css("border-bottom", "2px solid #f13435");
    });

    $('.btn-faceToface').on('click',function(){
        $('#blackground').removeClass('bgout').addClass("bgin").css("display","block");
        $('#faceToface').removeClass('faceleave ').addClass("facefromleft").css("display","block");
    });

    $('#blackground,#faceToface').on('click',function(){
        $('#blackground').removeClass('bgin').addClass("bgout");
        $('#faceToface').removeClass('facefromleft').addClass("faceleave");
        setTimeout(function(){
            $('#blackground').css("display","none");
            $('#faceToface').css("display","none");
        },900)
    });

    // 获取参数
       function getQueryString(name) { 
             var reg     = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
             var result  = window.location.search.substr(1).match(reg);
             return result ? decodeURIComponent(result[2]) : null;
        }

        var url='http://jkl.juyingtech.com/sklmall/front/share/shareUrl.htm';       
        var _mobile = getQueryString("mobile")||getQueryString("moblie");
        var jiangchuan_url=url+'?mobile='+_mobile+"&type=1";

    // 生成二维码 
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            width : 100,//设置宽高
            height : 100
        });
        qrcode.makeCode(jiangchuan_url);
            var listPanel = $('.activity>ul');
            var nubcers = 0;//向上滚动top值
            var lilist=document.querySelectorAll('#J_Activity li'); 
            
            
                function up() {//向上滚动
                    listPanel.animate({//中奖结果
                        'top': (nubcers - 35) + 'px'
                    }, 1500, 'linear', function () {
                        listPanel.css({'top': '0px'})
                        .find("li:first").appendTo(listPanel);
                        up();
                        });
            }
            up();
           
        
    
})
     </script>
</body>    